
<template>
  <div class="bf-commont-template">
    <!--<h3>员工考勤</h3> -->
    <div  class="clearfix box ">
      <div class="org-content float-l ">
          <div class="block shadow-r org-box">
            <div class="margin-r border padding border-radius org-inner bf-row-datapick">
              <div>
                <div >
                  <bf-org :userOrg='userOrg' @nodeClick="nodeClick"></bf-org>
                </div>
              </div>
            </div>
          </div>
      </div>

      <div class="day-conent float-l">
        <div class="clearfix bf-top-button">
          <div class="float-l">
            <el-button @click="exportList" type="primary">导出</el-button>
            <el-button @click="writeAdd" >签卡</el-button>
            <el-button @click="showAdd" >考勤月报表</el-button>
            <el-button @click="recount" >重新计算</el-button>
          </div>
          <div class="float-r">
            <div class="float-l">
              <el-input placeholder="请输入申请人搜索" prefix-icon="el-icon-search" v-model="searchData" @keyup.enter.native="quickSearch"></el-input>
            </div>
            <div class="float-l padding-l">
              <el-button @click="showSearch" type="primary">高级筛选</el-button>
            </div>
          </div>
        </div>
        <div class="attendance">
          <table  cellspacing="0" cellpadding="0" border="0" class="el-table__header" >
            <tr>
              <th>员工号</th>
              <th>日期</th>
              <th>上班打卡</th>
              <th>下班打卡</th>

              <th>外出</th>
              <!-- <th>出差</th> -->
              <th>请假</th>
              <th>操作</th>
            </tr>
            <tr  v-for="(val, key, index) in userData.list" :key="val.id">
              <!-- 员工号 -->
              <td>{{val.employeeNo}}</td>
              <!-- 日期 -->
              <td>{{val.attendanceDate}}</td>
              <!-- 上班 -->
              <td>
                <span>{{val.punchTime1}}</span>
                <span v-if="val.flag1 == '1'" class="color pointer" @click="getSignInfo(val)">(签)编辑</span>
              </td>
              <!-- 下班 -->
              <td>
                <span>{{val.punchTime2}}</span>
                <span v-if="val.flag2 == '1'" class="color pointer" @click="getLeftInfo(val)">(签)编辑</span>
              </td>

              <!-- 外出 -->
              <td>
                <span @click="outside(val.id)">
                  <span v-for="item in val.outsideIdsList" :key="item" class="color pointer">{{item}} </span>
                </span>
              </td>
              <!-- <td> <span v-if="val.outsideIds===''||val.outsideIds===null">{{val.outsideIds}}</span><span  v-else  style="color: blue;" @click="businessTravel(val.id)">{{val.outsideIds}}</span></td> -->

              <!-- 请假 -->
              <td >
                <span @click="leave(val.id)">
                  <span v-for="item in val.vacationIdsList" :key="item" class="color pointer">{{item}} </span>
                </span>
              </td>

              <!-- 操作 -->
              <td>
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link gray">
                    <i class="el-icon-more"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{value:val.id, lable:'detail'}">查看</el-dropdown-item>
                    <el-dropdown-item :command="{value:val, lable:'ajst'}" >调整</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </td>
              <!--<td><span  @click="edit(val.id)">编辑  </span><span  @click="ajst(val.id)">调整  </span> <span @click="detail(val.id)" >查看</span></td>
            --></tr>
          </table>
        </div>

        <div class="pagination-box padding-t">
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="$store.state.beneform4j.pageSizes"
            :page-size="$store.state.beneform4j.pageSize"
            :layout="$store.state.beneform4j.pageLayout"
            :total="userData.page?userData.page.total:userData.meta?userData.meta.total:0"
            @size-change = "sizeChange "
            @current-change = "currentChange"
            >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 签卡添加 -->
    <bf-table-edit :editForm ='writeDetailSetting' ref='addWriteRef' @formSubmit='writeSubmit' :editRules = "addRules" ></bf-table-edit>

    <!-- 签卡编辑-->
    <bf-table-edit :editForm ='writeDetailSetting' ref='editWriteRef' @formSubmit='editWriteSubmit' :editRules = "addRules"></bf-table-edit>

    <!--外出详情-->
    <bf-table-detail :rowNum="2" :width="800" ref="outsideBfTableDetail" :editForm="outsideDetailSetting"></bf-table-detail>
    <!--签卡详情-->
    <bf-table-detail ref="writeBfTableDetail" :editForm="writeDetailSetting"></bf-table-detail>
    <!--请假详情-->
    <bf-table-detail :rowNum="2" :width="800" ref="leaveBfTableDetail" :editForm="leaveDetailSetting"></bf-table-detail>
    <!--详情-->
    <bf-table-detail :rowNum="2" :width="800" ref="detail" :editForm="listDetailSetting"></bf-table-detail>
    <!-- 编辑-->
    <bf-table-edit :editForm ='editListSetting' ref='editRef' @formSubmit='editSubmit' :editRules = "editRules"></bf-table-edit>

    <!-- 调整-->
    <bf-table-edit :editForm ='ajstSetting' ref='ajstRef' @formSubmit='ajstSubmit' :editRules = "editRules"></bf-table-edit>

    <!-- 重新计算 -->
    <bf-table-edit ref="recount" :title="'重新计算'" :editForm="recountSetting" @formSubmit='recountSubmit' :editRules = "editRules"></bf-table-edit>
  </div>
</template>

<script>

import { outsideDetailSetting, leaveDetailSetting, writeDetailSetting, listDetailSetting, editListSetting, ajstSetting } from './table.setting.js'
import { recountApi, updataSignApi, getAllSignApi, getAttendanceList, findDetail, findUserInfoApi, insertWrite } from './api.js'
export default {
  data() {
    return {
      pageSize: 10,
      searchData: '',
      userOrg: true,
      userData: {},
      value4: '',
      currentPage4: 1,
      employeeData: {},
      pageParams: {
        page: 1,
        pageSize: this.$store.state.beneform4j.pageSize
      },
      recountSetting: [
        {
          field: 'recountdate',
          title: '选择月份',
          type: 'month'
        }
      ],
      leaveDetailSetting: leaveDetailSetting,
      outsideDetailSetting: outsideDetailSetting,
      writeDetailSetting: writeDetailSetting,
      listDetailSetting: listDetailSetting,
      editListSetting: editListSetting,
      ajstSetting: ajstSetting,
      addRules: {
        attendDate: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        attendTime: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]
      },
      editRules: {
        attendanceTimes: [
          { required: true, message: '请输入应出勤时间', trigger: 'blur' }
        ],
        attendanceTimesActual: [
          { required: true, message: '请输入实际出勤时间', trigger: 'blur' }
        ],
        lateNum: [
          { required: true, message: '请输入迟到次数', trigger: 'blur' }
        ],
        lateTimes: [
          { required: true, message: '请输入迟到时间数', trigger: 'blur' }
        ],
        leaveEarlyNum: [
          { required: true, message: '请输入早退次数', trigger: 'blur' }
        ],
        leaveEarlyTimes: [
          { required: true, message: '请输入早退时间', trigger: 'blur' }
        ],
        overtime: [
          { required: true, message: '请输入加班时间', trigger: 'blur' }
        ],
        adjustTimes: [
          { required: true, message: '请输入调休时间', trigger: 'blur' }
        ],
        abstmTimes: [
          { required: true, message: '请输入旷工时间', trigger: 'blur' }
        ],
        holidayTimes: [
          { required: true, message: '请输入年假时间', trigger: 'blur' }
        ],
        leaveTimes: [
          { required: true, message: '请输入事假时间', trigger: 'blur' }
        ],
        sickTimes: [
          { required: true, message: '请输入病假时间', trigger: 'blur' }
        ],
        funeralTimes: [
          { required: true, message: '请输入丧假时间', trigger: 'blur' }
        ],
        maternityTimes: [
          { required: true, message: '请输入产假\产检假时间', trigger: 'blur' }
        ],
        paternityLeave: [
          { required: true, message: '请输入陪产假时间', trigger: 'blur' }
        ],
        outsideIds: [
          { min: 3, max: 200, message: '长度在 3 到 200个字符', trigger: 'blur' }
        ],
        outsideIdsA: [
          { min: 3, max: 200, message: '长度在 3 到 200个字符', trigger: 'blur' }
        ],
        vacationIds: [
          { min: 3, max: 200, message: '长度在 3 到 200个字符', trigger: 'blur' }
        ],
        recountdate: [
          { required: true, message: '请选择月份', trigger: 'blur' }
        ]
      }
    }
  },
  mounted: function() {
    this.getList({
      pageSize: this.pageSize,
      page: 1
    })
    this.findUserInfo()
  },
  methods: {
    recountSubmit(form) {
      const params = {
        attendanceMonth: form.recountdate
      }
      recountApi(params).then(response => {
        if (response.success) {
          this.$refs.recount.hidden()
          this.getList({
            pageSize: this.pageSize,
            page: 1
          })
        }
      })
    },
    getList(params) {
      getAttendanceList(params).then((response) => {
        this.userData = response
      })
    },
    // 上班签卡改签
    getSignInfo(val) {
      this.employeeData.attendTime = val.punchTime1
      this.employeeData.attendDate = val.attendanceDate
      this.$refs.editWriteRef.show(this.employeeData)
    },
    // 下班签卡改签
    getLeftInfo(val) {
      this.employeeData.attendTime = val.punchTime2
      this.employeeData.attendDate = val.attendanceDate
      this.$refs.editWriteRef.show(this.employeeData)
    },
    nodeClick(item){
      this.getList({
        pageSize: this.pageSize,
        page: 1,
        employeeNo: item.id
      })
    },
    businessTravel(id){ // 出差
      this.findDetailPage(id, this.$refs.outsideBfTableDetail.show)
    },
    leave(id){ // 请假
      this.findDetailPage(id, this.$refs.leaveBfTableDetail.show)
    },
    outside(id){ // 外出
      this.findDetailPage(id, this.$refs.outsideBfTableDetail.show)
    },
    searchList() {


    },
    findDetailPage(id, showCall){ // 详情
      findDetail(id).then((response) => {
        showCall(response.data)
      })
    },
    findLongInfo(){ // 获取登录人的基本信息

    },
    editSubmit(params, formType, formList) {
      // console.log(params, formType, formList)
    },
    pageChange(pageObj) {
      // console.log(pageObj)
    },
    showSearch() {
      this.$refs.table.showSearch()
    },
    showAdd() {
      this.$router.push(
        {
          path: '/c4688764-4745-4f73-8ec1-c505fcf014af/570c9b37-5524-4e21-8920-7abf62e8bb06'
        }
      )
    },
    detail(id){
      this.findDetailPage(id, this.$refs.detail.show)
    },
    edit(id){
      this.findDetailPage(id, this.$refs.editRef.show)
    },
    ajst(id){
      this.findDetailPage(id, this.$refs.ajstRef.show)
    },
    getAllSign(obj) {
      // employeeData
      const params = {
        attendanceDate: obj.attendanceDate,
        employeeNo: obj.employeeNo
      }
      getAllSignApi(params).then(response => {
        // console.log(response)
      })
    },
    handleCommand(command) {
      if(command.lable === 'detail'){
        this.detail(command.value)
      }
      if(command.lable === 'ajst'){
        this.getAllSign(command.value)
      }
    },
    writeDetail(id){
      this.findDetailPage(id, this.$refs.editWriteRef.show)
    },
    findUserInfo(){
      findUserInfoApi().then((response) => {
        this.employeeData = response.data
      })
    },
    writeAdd(){ // 签卡弹框
      this.$refs.addWriteRef.show(this.employeeData)
    },
    writeSubmit(form){ // 签卡保存
      form.addr = this.employeeData.workAddree
      insertWrite(form).then((response) => {
        if (response.success) {
          this.$message({
            message: '操作成功!',
            type: 'success'
          })
          this.getList({
            pageSize: this.pageSize,
            page: 1
          })
          // this.findList('')
          this.$refs.addWriteRef.hiden()
          // this.searchList()
          // this.getTabs()
        }
      })
    },
    ajstSubmit(form){
      //
    },
    editWriteSubmit(form) {
      updataSignApi(form).then(response => {
        // console.log(response)
      })
    },
    recount(){ // 重新计算
      this.$refs.recount.show({})
    },
    quickSearch() {


    },
    sizeChange(params) {
      this.pageSize = params
      this.getList({
        pageSize: this.pageSize,
        page: 1
      })
    },
    currentChange(params) {
      this.getList({
        pageSize: this.pageSize,
        page: params
      })
    },
    exportList() {
      this.$message({
        message: '导出功能正在开发中',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.org-content{
  width: 20%;
  /* position: absolute; */
  top: 112px;
  bottom: 20px;
}
.day-conent{
  /* position: absolute; */
  /* margin-left: 20%; */
  width: 78%;
  margin-right: 16px;
}
.box{
  padding: 0 16px;
}
table{
  width: 100%;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}

.attendance table>tr>td, table>tr>th{
  border-bottom: 1px solid #ebeef5;
  text-align: center;
  padding: 7px 0;
  height: 23px;
  line-height: 23px;
}
.attendance table>tr>th{
  padding: 9px 0;
  background: #F5F8FA;
}
.table {
    font-size: 12px;
    color: #5c5c5c;
}
.org-box{
  margin-right: 16px;
  padding-top: 16px;
  min-height: 600px;

}
.org-inner{
  min-height: 600px;
  margin-bottom: 10px;
}
</style>
